<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录-考拉海购</title>
    <link rel="stylesheet" href="../style/login.css">
</head>

<body>
    <div id="topWrap">
        <div id="top">
            <div id="topLeft"></div>
            <div id="topRight"></div>
        </div>
    </div>
    <div id="loginWrap">
        <div id="login">
            <img src="https://kaola-haitao.oss.kaolacdn.com/e2722b45-286b-45e9-a8e2-4558f4f1bee6.png" alt="">
            <form action="#">
                <div>账号密码登录</div>
                <label for="">用户名：</label><input id="username" type="text" placeholder="请输入用户名"><br>
                <label for="">密&emsp;码：</label><input id="password" type="password" placeholder="请输入密码"><br>
                <button class="btn">登录</button><br>
                <a href="#" id="forget">忘记密码？</a>
                <a href="./register.html?#" id="register">注册账号</a>
            </form>
        </div>
    </div>
    <script type="module">
        var username = document.getElementById("username")
        var password = document.getElementById("password")
        // window.onload = function () {
        //     getCookie();
        // }
        var btn=document.querySelector(".btn")
        btn.onclick = function () {
            console.log("aaa")
            if (username.value.trim !== '' && password.value.trim !== '') {
                console.log("aa")
                ajax(`http://localhost/kaola/src/php/login.php?username=${username.value}&password=${password.value}`).then(function (res) {
                    console.log(res)
                    if (res.type === "success") {
                        // alert("登陆成功");
                        setCookie();
                        window.location.href = "http://localhost:3000/index.html";
                    }
                    else {
                        // console.log(Number(localStorage.getItem(username.value))+1);
                        if(localStorage.getItem(username.value)){
                            if(localStorage.getItem(username.value)>=3){
                                alert("错误次数过多,请明天再试");
                            }else{
                                localStorage.setItem(username.value,Number(localStorage.getItem(username.value))+1);
                                alert("账号或密码错误");
                            } 
                        }else{
                            localStorage.setItem(username.value,1);
                            alert("账号或密码错误")
                            console.log("aa")
                        }
                    
                    }
                });
            }
        }
        function ajax(url) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url)
            xhr.send();
            return new Promise(function (fulfill) {
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var res = JSON.parse(xhr.responseText);
                        fulfill(res);
                    }
                }
            })

        }
        function setCookie() {
            var logintimes = new Date();
            logintimes.setDate(logintimes.getDate() + 7);
            let userName = username.value; // 用户名
            let passWord = password.value; //密码
            let cookieName = 'userInfo' // cookie名称
            let data = {
                username: userName,
                password: passWord
            }
            let d = new Date()
            let saveTime = 7;// cookie保存时间（单位：天）
            d.setDate(d.getDate() + saveTime)
            document.cookie = cookieName + '=' + JSON.stringify(data) + ';path=/;expires=' + d.toGMTString();

        }

        function getCookie() {
            let cookie = document.cookie
            let cookieName = 'userInfo' // cookie名称
            let arr = cookie.split('; ') // 将cookie信息和时间戳拆分为数组
            let userInfo = null
            for (let i = 0; i < arr.length; i++) {
                let tempArr = arr[i].split('=') // 将cookie名称和data拆分开，分别是数组的第一个元素和第二个元素
                if (tempArr[0] === cookieName) {
                    userInfo = JSON.parse(tempArr[1])
                }
            }
            if (userInfo) {
                username.value=userInfo.username;
                password.value=userInfo.password;
                console.log(userInfo)
            } else {
            }
        }


    </script>
</body>

</html>